<html>
   <head>
      <title>PythonTiles</title>
      <script>
        window.addEventListener("DOMContentLoaded", function(event) {
          window.domLoadedDate = new Date()
          console.log("DOM fully loaded and parsed");
        });
        window.addEventListener("load", function(event) {
          console.log("All resources finished loading");
          var elapsedElement = document.getElementById("elapsed")
          elapsedElement.innerHTML = "the page took " + (new Date() - window.domLoadedDate) + "ms to load"
        }, false);
      </script>
   </head>
   <link rel="stylesheet" type="text/css" href="/static/style.css" />
   <body>
    <div class="container">
      <h1>PythonTiles</h1>
      <h2>{{ title }} <span id="elapsed">...</span></h2>
      <p class="tiles">
      {% for x in range(max_tiles) %}
        {% for y in range(max_tiles) %}
            <img src="/tile/{{ (x * max_tiles) + y }}" alt="Tile {{ (x * max_tiles) + y }}" />
        {% endfor %}
        <br />
      {% endfor %}
      </p>
      <p>
      {% if 'push' in title %}
      <a href="/">Go to standard HTTP/2 version</a>
      {% else %}
      <a href="/push">Go to HTTP/2 push promise version</a>
      {% endif %}
      </p>
    </div>
   </body>
 </html>